<template>
  <div v-show="!isMain && isView">
    <px-scrollbar class="view-equip-detail">
      <px-button style="margin: 16px 0 24px" type="primary" icon="ArrowLeft" @click="backMainPage">返回</px-button>
      <div class="view-equip-title">基础信息</div>
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">设备名称</div>
            <div class="text">{{ formValue.eqpName }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">设备编码</div>
            <div class="text">{{ formValue.eqpId }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">设备编号</div>
            <div class="text">{{ formValue.eqpCode }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">设备类型</div>
            <div class="text">{{ formValue.typeName }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">地块</div>
            <div class="text">{{ formValue.facName }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">安装位置</div>
            <div class="text">{{ formValue.positionNameAll }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">品牌</div>
            <div class="text">{{ formValue.brand }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">规格型号</div>
            <div class="text">{{ formValue.specification }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">联系人</div>
            <div class="text">{{ formValue.contactName }}</div>
          </div>
        </div>

        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">联系电话</div>
            <div class="text">{{ formValue.contactTel }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">合同PO编号</div>
            <div class="text">{{ formValue.htCode }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">合同PO名称</div>
            <div class="text">{{ formValue.htName }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">设备二维码</div>
            <div class="text">
              <px-upload v-model:file-list="qrcodeList" :limit="1" list-type="picture-card">
                <template #file="{ file }">
                  <div>
                    <img class="px-upload-list__item-thumbnail" :src="file.url || file.fileUrl" alt="" />
                    <span class="px-upload-list__item-actions">
                      <span @click="photoPreview">
                        <px-icon><zoom-in /></px-icon>
                      </span>
                      <span @click="photoDownload(file)">
                        <px-icon>
                          <Download />
                        </px-icon>
                      </span>
                    </span>
                  </div>
                </template>
              </px-upload>
              <px-dialog v-model="dialogVisible">
                <img w-full :src="qrcodeUrl" style="margin: 0 auto" alt="设备二维码" />
              </px-dialog>
            </div>
          </div>
          <div class="view-equip-item large">
            <div class="label">设备标签</div>
            <div v-if="qrcodeImg[0]" class="text">
              <PhotoUpload photoType="view" :photoData="{ moduleName: 'eqpFile' }" :photoList="qrcodeImg" />
            </div>
            <div v-else class="text">-</div>
          </div>
        </div>
      </div>
      <div class="view-equip-title">使用信息</div>
      <div class="img">
        <div class="imgBox"></div>
        <div class="imgSize">设备图纸</div>
      </div>
      <div style="display: flex; flex-wrap: wrap; margin-bottom: 16px">
        <PhotoUpload v-if="!isMain && isView" photoType="view" :photoData="{ moduleName: moduleName }" :photoList="formValue.pictureList" />
      </div>
      <div class="img">
        <div class="imgBox"></div>
        <div class="imgSize">文档</div>
      </div>
      <div class="view-equip-content" style="margin-bottom: 24px">
        <FileUpload v-if="!isMain && isView" fileType="view" :fileData="{ moduleName: moduleName }" :fileList="formValue.docList" />
      </div>
      <div class="view-equip-title" style="margin-top: 32px">关联备品备件</div>
      <px-table :data="formValue.sparePartIdList" class="equip-table" size="small" height="350" border style="margin-bottom: 24px">
        <px-table-column type="index" label="序号" min-width="60" align="center" fixed="left" show-overflow-tooltip />
        <px-table-column fixed="left" prop="facCodeDesc" label="归属地块" min-width="160" show-overflow-tooltip />
        <px-table-column prop="sparePartName" label="备件名称" min-width="160" show-overflow-tooltip />
        <px-table-column prop="specification" label="规格型号" min-width="160" show-overflow-tooltip />
        <px-table-column prop="eqpTypeCodeDesc" label="备件类型" min-width="160" show-overflow-tooltip />
        <px-table-column prop="sparePartUnit" label="单位" min-width="160" show-overflow-tooltip />
        <px-table-column prop="currentStock" label="数量" min-width="160" show-overflow-tooltip />
      </px-table>
    </px-scrollbar>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRefs, watch, computed, ref } from "vue";
import PhotoUpload from "@/components/Upload/PhotoUpload.vue";
import FileUpload from "@/components/Upload/FileUpload.vue";
import { viewToolLedger } from "@/api/erc/equip";
import axios from "axios";
import { getToken } from "@/utils/auth";
import { dataURLtoBlob } from "@/utils/common";
// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage"]);
// 父级传过来的值
const props = defineProps(["isMain", "isView", "sparePartsId", "tableType"]);
// 显示隐藏
const isMain = computed(() => props.isMain);
const sparePartsId = computed(() => props.sparePartsId);
const qrcodeList = ref([]);
const dialogVisible = ref(false);
const qrcodeUrl = ref("");
const qrcodeImg = ref([]); // 设备二维码文件
// 页面本身的值
const state = reactive<any>({
  formValue: {
    id: "",
    eqpId: "",
    eqpName: "",
    facCode: "",
    specification: "",
    brand: "",
    contactId: "",
    typeCode: "",
    positionCode: "",
    contactName: "",
    contactTel: "",
    pictureList: [], //图片
    docList: [], //文档
    sparePartIdList: [],
    tableData: [],
    bigFile: "" //二维码
  },
  moduleName: ""
});
const { formValue, moduleName } = toRefs(state);
// 监视isMain和isView值
watch(sparePartsId, newvalue => {});
watch(isMain, async val => {
  if (!val && props.isView) {
    // 点击tab显示页面详情
    if (props.tableType == "view") {
      formValue.value = props.sparePartsId;
      formValue.value.pictureList = props.sparePartsId.pictureList || [];
      formValue.value.docList = props.sparePartsId.docList || [];
      formValue.value.bigFile = props.sparePartsId?.bigFileDTO?.fileName || "";
      const { bigFileDTO } = props.sparePartsId;
      qrcodeImg.value = [bigFileDTO];
      queryTable();
      getUrl();
    }
  } else {
    formValue.value = {
      id: "",
      eqpId: "",
      eqpName: "",
      facCode: "",
      specification: "",
      brand: "",
      contactId: "",
      typeCode: "",
      positionCode: "",
      contactName: "",
      contactTel: "",
      pictureList: [], //图片
      docList: [], //文档
      sparePartIdList: [], //表格
      tableData: [],
      bigFile: "" //二维码
    };
  }
});
const photoPreview = () => {
  dialogVisible.value = true;
};
const photoDownload = file => {
  const link = document.createElement("a");
  link.style.display = "none";
  link.href = file.url;
  link.setAttribute("download", file.name);
  document.body.appendChild(link);
  link.click();

  document.body.removeChild(link);
};
const getUrl = async () => {
  axios({
    method: "post",
    url: "/ifp/erc/api/v1/eqp/createQrCode",
    data: { eqpId: props.sparePartsId.eqpId },
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer " + getToken().accessToken || "",
      facCode: localStorage.getItem("facCode") || ""
    }
  }).then(async res => {
    const blob = dataURLtoBlob(res.data);
    const imgSrc = URL.createObjectURL(blob);
    qrcodeUrl.value = imgSrc; // 图片下载地址
    qrcodeList.value = [];
    qrcodeList.value.push({ url: res.data, name: "设备二维码" }); // 图片展示地址
  });
};

const queryTable = async () => {
  const params = {
    eqpId: props.sparePartsId.eqpId
  };
  const data = await viewToolLedger(params);
  formValue.value.sparePartIdList = data;
};

// 返回主页面
const backMainPage = () => {
  emits("backMainPage");
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");

.imgBox {
  width: 3px;
  height: 16px;
  background: #3b82f6;
  border-radius: 0px 100px 100px 0px;
  margin-right: 9px;
}

.img {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  height: 22px;
  /* 大盒子的高度 */
  margin-bottom: 8px;
  font-size: 14px;
}

.imgSize {
  height: 22px;
  font-size: 14px;
  font-family:
    PingFangSC-Medium,
    PingFang SC;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.8);
  line-height: 22px;
}
:deep(.px-upload--picture-card) {
  display: none;
}
</style>
